<template>
	<div class="header">
		<div class="header-left">
      <div class="iconfont icon-back">&#xe624;</div>
    </div>
		<div class="header-input">
      <span class="iconfont icon-search">&#xe632;</span>
      输入城市/景点/游玩主题
    </div>
    <router-link to="/City">
      <div class="header-right">
        {{this.city}}
        <span class="iconfont icon-arrow">&#xe791;</span>
      </div>
    </router-link>
	</div>
</template>

<script>
  import {mapState} from 'vuex'

	export default {
      name: 'HomeHeader',
    computed:{
      ...mapState(['city'])
    }
	}

</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
	.header {
    display: flex;
    line-height: .86rem;
    background: $bgColor;
    color: #fff;
    .header-left{
      width: .64rem;
      .icon-back{
        font-size:.4rem;
        text-align:center;
      }
    }
    .header-input{
      flex:1;
      height:.64rem;
      line-height:.64rem;
      margin-top:0.12rem;
      margin-left:.2rem;
      background-color:#fff;
      border-radius .1rem;
      color:#ccc;
      .icon-search{
        margin-left:.2rem;
        font-size:.28rem;
      }
    }
    .header-right{
      min-width: 1.04rem;
      padding-left:.1rem;
      padding-right:.1rem;
      float:right;
      text-align:center;
      color:#fff;
      .icon-arrow{
        font-size:.28rem;
        margin-left:-.04rem;
      }
    }
  }
</style>
